<script setup>
import { ref } from 'vue'

defineProps({
  title: String
})

const count = ref(0)
</script>

<template>
  <div class="box ">
    <div>
      <div v-if="title && title != '送达时效'" class="title ">
        <span class="textOver">{{ title }}</span>
      </div>
      <div v-else class="title" style="margin-bottom:15px">
        <span class="textOver">{{ title }}</span>
      </div>
      <div class="content">
        <slot> </slot>
      </div>
    </div>
  </div>

</template>

<style scoped>
.box {
  color: #fff;
  height: 100%;
  /* width: 100%; */
  /* background-image: radial-gradient(circle,transparent,#0A141FFF,#0E3573FF); */
  /* background-image: linear-gradient(to bottom,#0E3573FF,5%,transparent 54%); */
  background: linear-gradient(to bottom, #072354FF, 14%, transparent 54%),
    linear-gradient(to top, #072354FF, 5%, transparent 20%),
    linear-gradient(to right, #072354FF, 5%, transparent 20%), linear-gradient(to left, #072354FF, 5%, transparent 20%);


  /* #072354FF */
  border-radius: 10px;
  overflow: hidden;
  background-repeat: no-repeat;
  border: 1px solid #0E3573FF;
  padding: 17px 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.box>div {
  margin: 0 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 5px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(57, 121, 193, 0.75);
  /* border: 1px solid #3979C1; */
  position: relative;
  margin-bottom: 29px;
}

.title span {
  margin-left: 12px;
  font-size: 22px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #AADDFF;
  text-align: left;


}

.title::before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: #47F0F6FF;
  display: inline-block;
  transform: rotate(45deg);
  /* margin-right: 12px; */
}

.title:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #47F0F6;
  transform: translate(0px, 3px);
}

.content {
  flex: 1;
  overflow: auto;
}

.content::-webkit-scrollbar

/* Safari and Chrome */
  {
  display: none;
}

.content {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}
</style>
